<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
            <FormItem label="二级集团：">
                <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
            </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="企业名称：" prop="companyId">
            <company-select v-model="dataToQuery.companyName" style="width:100%" />
            <!-- <div>
              <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
                            :orgTree="true"
                            :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
            </div> -->
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='是否重点消防单位：' prop='keyUnit'>
            <Select v-model="dataToQuery.keyUnit">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='绩效管理考核单元编号：'>
            <Input class='query-form-el' type='text' v-model='dataToQuery.unitNo'></Input>
          </FormItem>
        </Col>
        <Col span="8" offset="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <download-button :api="exportUrl" :queryForm="dataToQuery" />
          <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportList">导出</Button> -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
      @on-sort-change="sortChange"
      :loading='pageStatus.loading' @on-expand="onExpand"
           border :columns="columns1" :data="dataTable">
    </Table>
    <!--分页-->
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
        <!-- <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1" @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator /> -->
      </Col>
    </Row>
    <!--新增、修改、详情-->
    <Modal :title="mode == 'view' ?'消防安全重点单位登记表详情':'消防安全重点单位登记表'" :transfer=false :mask-closable="false"
           v-model="dialogShow" v-if="dataToView && dialogShow" :width=850 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
                :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?140:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='企业名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName"
                                :orgTree="true" :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='绩效管理考核单元编号：' prop='unitNo'>
                  <div v-if="mode === 'view'">{{ dataToView.unitNo }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写绩效管理考核单元编号" type='text'
                         v-model='dataToView.unitNo'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='所在位置：' prop='location'>
                  <div v-if="mode === 'view'">{{ dataToView.location }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写所在位置" type='text'
                         v-model='dataToView.location'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='占地面积（m²)：' prop='areaCovered'>
                  <div v-if="mode === 'view'">{{ dataToView.areaCovered }}</div>
                  <InputNumber v-else class='query-form-el' placeholder="请填写占地面积（m²)" :min="0" type='text'
                               v-model='dataToView.areaCovered'></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='建筑面积（m²)：' prop='floorage'>
                  <div v-if="mode === 'view'">{{ dataToView.floorage }}</div>
                  <InputNumber v-else class='query-form-el' placeholder="请填写建筑面积（m²)" :min="0" type='text'
                               v-model='dataToView.floorage'></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='最高建筑（m)：' prop='highestBuilding'>
                  <div v-if="mode === 'view'">{{ dataToView.highestBuilding }}</div>
                  <InputNumber v-else class='query-form-el' placeholder="请填写最高建筑（m)" :min="0" type='text'
                               v-model='dataToView.highestBuilding'></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='消防水源：' prop='fireWaterSource'>
                  <div v-if="mode === 'view'">{{ dataToView.fireWaterSource }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写消防水源" type='text'
                         v-model='dataToView.fireWaterSource'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='认定机构：' prop='accreditationBody'>
                  <div v-if="mode === 'view'">{{ dataToView.accreditationBody }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写认定机构（属地消防救援机构名称，按照集团、二级集团管理规定认定）" type='text'
                         v-model='dataToView.accreditationBody'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">

              <Col span="11">
                <FormItem label='是否重点消防单位：' prop='keyUnit'>
                  <div v-if="mode === 'view'">{{ dataToView.keyUnit == '1' ? '是' : '否' }}</div>
                  <Select v-else v-model="dataToView.keyUnit" @on-change="(value)=>{if(value=='0') { dataToView.accreditationTime='' }}" style="width:100%">
                    <Option value="1">是</Option>
                    <Option value="0">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11" v-if="dataToView.keyUnit == '1'">
                <FormItem label='消防安全重点单位认定时间：' prop='accreditationTime'>
                  <div v-if="mode === 'view'">{{ dataToView.accreditationTime && renderViewDate(dataToView.accreditationTime) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择消防安全重点单位认定时间"
                             :clearable="false" v-model='dataToView.accreditationTime'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11" v-else></Col>
            </Row>


            <Row>
              <Col span="23" v-if="mode !== 'view'" class="query-form" style="margin-left: 15px">
                <Button  class="ivu-btn-add" icon="md-add" @click="itemModel=true, itemAdd=true;detailItem={}">新增消防重点部位详情</Button>
                <Button icon="md-cloud-upload" class="ivu-btn-add" @click="openUpload">导入消防重点部位详情</Button>
                <Button icon="md-download" class="ivu-btn-add" @click="downloadModel">下载模板</Button>
              </Col>
              <Col span="23" class="query-form" style="margin-left: 15px">
                <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350"
                       :columns="itemColumn"
                       :data="dataToView.items">
                </Table>
              </Col>

            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填报人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填报时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" :transfer=false v-model="itemModel" :width=800 title="消防安全重点部位详情"
           @on-cancel="itemModel=false,detailItem={}">
      <Row>
        <Col span="24">
          <Form ref="itemForm" :class="'modal-form'" :show-message="false" :model="detailItem" :rules="itemRuleCustom"
                label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='消防安全重点部位名称：' prop='partName'>
                  <div v-if="mode === 'view'">{{ detailItem.partName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写消防安全重点部位名称" type='text'
                         show-word-limit :maxlength="100" v-model='detailItem.partName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='场所类别：' prop='siteCategory'>
                  <div v-if="mode === 'view'">{{ detailItem.siteCategoryName }}</div>
                  <!--<Input v-else class='query-form-el' placeholder="请填写场所类别" type='text' v-model='detailItem.siteCategory'></Input>-->
                  <Select v-else class='' placeholder="请选择场所类别" v-model='detailItem.siteCategory' label-in-value
                          @on-change='(value)=>{detailItem.siteCategoryName=value.label,detailItem.siteCategory=value.value}'>
                    <Option v-for="item in dictMap.siteCategoryList" :value="item.codingCodeId" :label="item.codingName"
                            :key="item.codingCodeId">
                      <span>{{ item.codingName }}</span>
                      <!--<span style="float:right;color:#ccc">{{ item.note }}</span>-->
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='建筑物结构及层数：' prop='buildingPiles'>
                  <div v-if="mode === 'view'">{{ detailItem.buildingPiles }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写建筑物结构及层数" type='text'
                         show-word-limit :maxlength="100" v-model='detailItem.buildingPiles'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='耐火等级：' prop='fireRating'>
                  <div v-if="mode === 'view'">{{ detailItem.fireRating }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写耐火等级" type='text'
                         show-word-limit :maxlength="50" v-model='detailItem.fireRating'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='主要产品或储存物品名称及数量：' prop='storedNameNumber'>
                  <div v-if="mode === 'view'">{{ detailItem.storedNameNumber }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写主要产品或储存物品名称及数量" type='text'
                         show-word-limit :maxlength="100" v-model='detailItem.storedNameNumber'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='配备的主要消防设备设施：' prop='fireEquipment'>
                  <div v-if="mode === 'view'">{{ detailItem.fireEquipment }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写配备的主要消防设备设施" type='text'
                         show-word-limit :maxlength="100" v-model='detailItem.fireEquipment'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='消防设施、避雷设施检测情况（持续按年度填报）：' prop='fireEquipmentDetection'>
                  <div v-if="mode === 'view'">{{ detailItem.fireEquipmentDetection }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写消防设施、避雷设施检测情况（持续按年度填报）" type='text'
                         show-word-limit :maxlength="100" v-model='detailItem.fireEquipmentDetection'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='备注：' prop='remark'>
                  <div v-if="mode === 'view'">{{ detailItem.remark }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写备注" type='text'
                         show-word-limit :maxlength="500" v-model='detailItem.remark'></Input>
                </FormItem>
              </Col>
            </Row>


          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-save' @click="itemSubmit('itemForm')">确定</Button>
        <Button type="primary" class='ivu-btn-cancel' @click="itemModel=false,detailItem={}">取消</Button>
        <!--<Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>-->
      </div>
    </Modal>

    <Modal :transfer=false title="批量导入" v-model="modal9" width="800">
      <Form ref="uploadItemData">
        <Row>
          <i-col span="24">
            <Upload
                    name="file"
                    type="drag"
                    :format="['xlsx', 'xls']"
                    accept=".xlsx, .xls"
                    :before-upload="handleUpload "
                    action="//jsonplaceholder.typicode.com/posts/">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>请上传xls、xlsx格式的文件</p>
              </div>
            </Upload>
          </i-col>
        </Row>
        <div v-if="fileTrue">
          <a>{{ uploadMap.file.name }}</a>
          <Button type="text" icon="md-trash" @click="uploadMap.file = {},fileTrue = false" style="margin-left: 5px;margin-bottom: 3px"/>
        </div>
      </Form>
      <div slot="footer">
        <Button class='ivu-btn-save' :loading="buttonLoading" @click="submitFile()">上传</Button>
        <Button @click="modal9 = false" class="ivu-btn-cancel" >取消</Button>
      </div>
    </Modal>
    <Modal :transfer=false title="异常数据，请检查模板" v-model="modal10" width="800">
      <!-- <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}"> -->
        <Table ref='table3' :loading="loading3" border :columns="errorColumns" style="margin-top: 0px"
               :data="errorInfos" width="100%" :height="500" highlight-row stripe size="small"></Table>
      <!-- </div> -->
      <div slot="footer">
        <Button class='ivu-btn-cancel' @click="modal10=false;errorInfos=[]">取消</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {formatDate} from '@/tools/index'

var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'

export default {
  components: {cascaderDom},
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        {
          type: 'expand', width: 30,
          fixed: 'left',
          _disableExpand: true,
          render: (h, params) => {
            return h('Table', {
              props: {
                columns: [
                  {key: 'partName', title: '消防安全重点部位名称', align: 'center', minWidth: 120,},
                  {key: 'siteCategoryName', title: '场所类别', align: 'center', minWidth: 120,},
                  {key: 'buildingPiles', title: '建筑物结构及层数', align: 'center', minWidth: 120,},
                  {key: 'fireRating', title: '耐火等级', align: 'center', minWidth: 120,},
                  {key: 'storedNameNumber', title: '主要产品或储存物品名称及数量', align: 'center', minWidth: 120,},
                  {key: 'fireEquipment', title: '配备的主要消防设备设施', align: 'center', minWidth: 120,},
                  {key: 'fireEquipmentDetection', title: '消防设施、避雷设施检测情况（持续按年度填报）', align: 'center', minWidth: 120,},
                  {key: 'remark', title: '备注', align: 'center', minWidth: 120, tooltip: true},
                ],//表头
                data: params.row.items,//内部表格展示的数据
              },
            })//我这里使用的是表格，大家也可以根据自己的实际情况更换别的组件
          }
        },
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 160,},
        {key: 'unitNo', title: '绩效管理考核单元编号', align: 'center', minWidth: 120,},
        {key: 'location', title: '所在位置', align: 'center', minWidth: 120,},
        {key: 'areaCovered', title: '占地面积（m²)', align: 'center', minWidth: 120,},
        {key: 'floorage', title: '建筑面积（m²)', align: 'center', minWidth: 120,},
        {key: 'highestBuilding', title: '最高建筑（m)', align: 'center', minWidth: 120,},
        {key: 'fireWaterSource', title: '消防水源', align: 'center', minWidth: 120,},
        {key: 'accreditationBody', title: '认定机构', align: 'center', minWidth: 120,},
          {key: 'keyUnit', title: '是否重点消防单位', align: 'center', minWidth: 100,render(h, params) {
                  return h('span', params.row.keyUnit == '1' ? '是' : '否')}},
        {key: 'accreditationTime', title: '消防安全重点单位认定时间', sortable: "custom", align: 'center', minWidth: 120, render: this.renderCellDate},
        this.getActionColumns()
      ],
      ruleCustom: {
        companyId: [{required: true, message: '请填写单位名称', trigger: 'change',}],
        unitNo: [{required: true, message: '请填写绩效管理考核单元编号', trigger: 'change',}],
        location: [{required: true, message: '请填写所在位置', trigger: 'change',}],
        areaCovered: [{required: true, message: '请填写占地面积（m²)', trigger: 'change', type: 'number'}],
        floorage: [{required: true, message: '请填写建筑面积（m²)', trigger: 'change', type: 'number'}],
        highestBuilding: [{required: true, message: '请填写最高建筑（m)', trigger: 'change', type: 'number'}],
        fireWaterSource: [{required: true, message: '请填写消防水源', trigger: 'change',}],
        keyUnit: [{required: true, message: '请选择', trigger: 'change',}],
        accreditationBody: [{required: true, message: '请填写认定机构（属地消防救援机构名称，按照集团、二级集团管理规定认定）', trigger: 'change',}],
        accreditationTime: [{required: true, message: '请填写消防安全重点单位认定时间', trigger: 'change', type: 'date'}],

      },
      tableHeight: 10,
      dictMap: {},
      detailItem: {},
      itemModel: false,
      itemAdd: false,
      columns2: [
        {title: '序号', width: 70, align: 'center', render: this.indexColumnsRender},
        {key: 'partName', title: '消防安全重点部位名称', align: 'center', minWidth: 120,},
        {key: 'siteCategoryName', title: '场所类别', align: 'center', minWidth: 120,},
        {key: 'buildingPiles', title: '建筑物结构及层数', align: 'center', minWidth: 120,},
        {key: 'fireRating', title: '耐火等级', align: 'center', minWidth: 120,},
        {key: 'storedNameNumber', title: '主要产品或储存物品名称及数量', align: 'center', minWidth: 120,},
        {key: 'fireEquipment', title: '配备的主要消防设备设施', align: 'center', minWidth: 120,},
        {key: 'fireEquipmentDetection', title: '消防设施、避雷设施检测情况（持续按年度填报）', align: 'center', minWidth: 120,},
        {key: 'remark', title: '备注', align: 'center', minWidth: 120, tooltip: true},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 110,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '13px',},
                on: {
                  click: () => {
                    this.detailItem = {...params.row}
                    this.itemModel = true
                    this.itemAdd = false
                  }
                }
              }, '修改'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '13px', color: 'red'},
                on: {
                  click: () => {
                    this.dataToView.items.splice(params.index, 1)
                  }
                }
              }, '删除'),
            ])
          }
        }
      ],
      itemRuleCustom: {
        partName: [{required: true, message: '请填写消防安全重点部位名称', trigger: 'change',}],
        siteCategory: [{required: true, message: '请填写场所类别', trigger: 'change',}],
        buildingPiles: [{required: true, message: '请填写建筑物结构及层数', trigger: 'change',}],
        fireRating: [{required: true, message: '请填写耐火等级', trigger: 'change',}],
        storedNameNumber: [{required: true, message: '请填写主要产品或储存物品名称及数量', trigger: 'change',}],
        fireEquipment: [{required: true, message: '请填写配备的主要消防设备设施', trigger: 'change',}],
        fireEquipmentDetection: [{required: true, message: '请填写消防设施、避雷设施检测情况（持续按年度填报）', trigger: 'change',}],
      },
      // api
      exportUrl: Api.exportFireSafetyUnitsRegistration,
      queryUrl: Api.queryFireSafetyUnitsRegistration,
      deleteUrl: Api.deleteFireSafetyUnitsRegistration,
      updateUrl: Api.updateFireSafetyUnitsRegistration,
      saveUrl: Api.saveFireSafetyUnitsRegistration,
      buttonLoading: false,

        uploadMap:{},
        modal9: false,
        modal10: false,
        fileTrue: false,
        errorInfos: [],
        errorColumns: [
            { key:'num',title: '序号', width: 70, align: 'center'},
            {key: 'partName', title: '消防安全重点部位名称', align: 'center', minWidth: 120,},
            {key: 'siteCategoryName', title: '场所类别', align: 'center', minWidth: 120,},
            {key: 'buildingPiles', title: '建筑物结构及层数', align: 'center', minWidth: 120,},
            {key: 'fireRating', title: '耐火等级', align: 'center', minWidth: 120,},
            {key: 'storedNameNumber', title: '主要产品或储存物品名称及数量', align: 'center', minWidth: 120,},
            {key: 'fireEquipment', title: '配备的主要消防设备设施', align: 'center', minWidth: 120,},
            {key: 'fireEquipmentDetection', title: '消防设施、避雷设施检测情况（持续按年度填报）', align: 'center', minWidth: 120,},
            {key: 'remark', title: '备注', align: 'center', minWidth: 120, tooltip: true},
        ],
    }
  },
  computed: {
    itemColumn() {
      const columns = [...this.columns2];
      const columns1 = []
      columns.forEach(item => {
        if (this.mode !== 'view') {
          columns1.push(item)
        } else {
          if (item.key !== 'action') {
            columns1.push(item)
          }
        }
      })
      return columns1
    },
  },
  async mounted() {
    this.setTableHeight();
    await this.$http.get(Api.queryDictBycode + "env-00019", {}).then((res) => {
      this.dictMap = {
        'siteCategoryList': res.data.data['env-00019'],
      }
    }).catch(e => {
      this.$Message.error("数据字典获取失败")
    });
    this.query();
  },
  methods: {
    ...pageCommonFunction,

      openUpload(){
          this.modal9 = true;
          this.fileTrue = false
          this.uploadMap = {}
      },
      handleUpload (file) {
          this.uploadMap.file = file;
          this.fileTrue = true;
          return false;
      },
      submitFile(){
          let formData = new FormData();
          formData.append("file", this.uploadMap.file);
          this.$http.post(this.queryUrl + '/upload', formData).then((res) => {
              if(res.data.status == 201){
                  this.$Message.error(res.data.msg);
                  this.modal10 = true;
                  let title = ['partName','siteCategory','buildingPiles','fireRating','storedNameNumber','fireEquipment','fireEquipmentDetection']
                  res.data.data.map((i=>{
                      let cellClassName = {}
                      for (let k in title) {
                          if (i[title[k]] == null){
                              cellClassName[title[k]] = "table-info-cell-red";
                          }
                      }
                      i.cellClassName = cellClassName;
                  }));
                  this.errorInfos = res.data.data;
              }else if(res.data.status == 200){
                  this.$Message.success("批量导入成功");
                  let dataItems = res.data.data
                  dataItems.forEach(item =>{
                      this.dataToView.items.push(item);
                  })
                  this.modal9 = false;
                  this.fileTrue = false
              }
          }).catch(e => {
              console.log(e)
              this.$Message.error("导入失败！请检查导入文档的格式是否正确");
          })
      },
      downloadModel(){
          this.$http.get(this.queryUrl + '/upload/model',{
              params: {
                  type: this.$route.query.noticeCategory
              },
              responseType: 'arraybuffer'
          }).then((res) => {
              const aLink = document.createElement("a");
              let blob = new Blob([res.data], {
                  type: "application/vnd.ms-excel"
              })
              aLink.href = URL.createObjectURL(blob);
              aLink.download = "消防安全重点单信息导入模板.xlsx" //标题
              aLink.click();
              document.body.appendChild(aLink);
          })
      },

    itemSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: '<p>是否要提交？</p>',
            onOk: () => {
              let _this = this
              _this.dataToView.items.splice()
              if (_this.itemAdd) {
                _this.dataToView.items.push(_this.detailItem)
              } else {
                _this.dataToView.items[_this.detailItem._index] = _this.detailItem
              }
              _this.itemModel = false
            },
            onCancel: () => {
            }
          })
        } else {
          this.$Message.error('请填报完整!');
        }
      })
    },

    deleteData(params) {
      this.deleteDateAjax(params);
    },
    exportList() {
      this.exportFormSubmit();
    },
    query() {

      this.queryAjax();
    },
    submit(name) {
      if (this.dataToView.items.length < 1) {
        this.$Message.warning('消防安全重点单位详情至少填报一条');
      } else {
        this.submitAjax(name);
      }
    },
    createEmptyDataToAdd() {
      return {
        areaCovered: 0,
        floorage: 0,
        highestBuilding: 0,
        id: this.get_uuid(),
        idFiles: [],
        items: [],
      }
    },
    async afterDataToViewInit() {
      // await this.getFiles1('id', 'examSelect');
    },

  }
}
</script>

<style lang='css' scoped>
@import '../../../index.css';
</style>
